<template>
  <div class="page_vue" v-loading="TeamLoading">
    <div class="route-box">
      <div class="breadcrumb">
        <svg-icon :icon-class="routerInfo?.meta.icon || ''"></svg-icon>
        <div>{{ routerInfo?.meta.title || '' }}</div>
      </div>
      <div class="create_box">
        <el-button type="primary" @click="openCreateClick()">
          <el-icon>
            <Plus />
          </el-icon>
          <span class="create_text">{{ $t("teamDoc.create") }}</span>
        </el-button>
      </div>
    </div>
    <div class="teamSearch">
      <div class="teamSearch_box">
        <el-input :placeholder="$t('teamDoc.searchTeam')" :prefix-icon="Search" v-model="searchInput" class="inputClass"
          @keyup.enter.native="inputEnter">
        </el-input>
        <div class="search_btn" :class="{ search_btn_active: searchType == '0' }" @click="selectAllTeamClick('0')">
          {{
            $t("teamDoc.all") }}
        </div>
        <div class="search_btn" :class="{ search_btn_active: searchType == '1' }" @click="selectAllTeamClick('1')">
          {{
            $t("teamDoc.collect") }}
        </div>
        <div>
          <el-popover placement="bottom" :width="100" trigger="click" v-model="popoverVisible" :virtual-ref="buttonRef">
            <el-select v-model="type_id" :placeholder="$t('teamDoc.slectTypeMsg')" @change="selectAllTeamClick('2')">
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <template #reference>
              <div class="search_btn" :class="{ search_btn_active: searchType == '2' }" ref="buttonRef">
                {{
                  $t("teamDoc.classify") }}
              </div>
            </template>
          </el-popover>

        </div>

        <!-- <div class="search_btn" :class="{ search_btn_active: searchType == false }" @click="selectAllTeamClick">全部</div>
          <div class="search_btn" :class="{ search_btn_active: searchType ==true  }" @click="selectAllTeamClick">收藏</div> -->
      </div>
      <div class="team_num">{{ requestStr.total }}{{ $t("teamDoc.team") }}</div>
    </div>

    <div class="table_box">
      <el-table :data="teamTableData" ref="multipleTable" tooltip-effect="dark" style="width: 100%"
        :highlight-current-row="true" @row-dblclick="teamTableRowDblClick">
        <el-table-column prop="teamName" :label="$t('teamDoc.teamName')" sortable show-overflow-tooltip>
          <!-- <el-table-column prop="teamName" :label="getName(searchType)" sortable> -->
          <template #default="scope">
            <div class="realName_box">
              <div>
                <svg-icon icon-class="xiangmutuandui" style="
                      font-size: 30px;
                      vertical-align: middle;
                      margin-right: 4px;
                    " />
                <span class="realName_class">{{ scope.row.teamName }}</span>
                <el-tag style="margin-left: 10px;" v-if="scope.row.type == '1'" type="success">项目</el-tag>
              </div>
              <div class="realName_box_right">
                <el-tooltip effect="dark" :content="$t('teamDoc.teamInfo')" placement="top-start" :offset=8>
                  <div class="iconBox" @click.stop="apiTeamInfoClick(scope.row)">
                    <svg-icon icon-class="info" class="icon_size"></svg-icon>
                  </div>
                </el-tooltip>
                <el-tooltip effect="dark" :content="$t('teamDoc.collect')" placement="top-start" :offset=8>
                  <div class="iconBox" @click.stop="FilesCollectionAddCollection(scope.row)">
                    <svg-icon v-if="scope.row.collection == '0'" icon-class="collect" class="icon_size"></svg-icon>
                    <svg-icon v-else icon-class="collect-fill" class="icon_size"></svg-icon>
                  </div>
                </el-tooltip>
                <!-- 更多 -->
                <team-info-more class="iconBox" :rowItem="scope.row" @refreshData="refreshData"></team-info-more>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('teamDoc.principal')" prop="ownerName">
          <template #default="scope">
            <div class="peopleBox">
              <div class="people">
                <span>
                  {{ scope.row.ownerName.slice(-2) }}
                </span>
              </div>
              {{ scope.row.ownerName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('teamDoc.spaceTit')">
          <!-- <el-table-column :label="getTime(searchType)"> -->
          <template #default="scope">
            {{ proxy?.$yuUtils.filterSizeUnit(scope.row.usedSpace) }} /
            {{ proxy?.$yuUtils.filterSizeUnit(scope.row.space) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="body_foot_page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="requestStr.page" :page-size="requestStr.size" layout="total, prev, pager, next, sizes"
          :total="requestStr.total"></el-pagination>
      </div>
    </div>
    <!-- 团队信息 -->
    <team-drawer ref="TeamDrawerRefs"></team-drawer>
    <!-- 创建团队 -->
    <create-team ref="createTeamRefs" @refreshDatas="createTeam_refreshDatas"></create-team>
  </div>
</template>


<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import TeamInfoMore from './components/team-info-more.vue'
import TeamDrawer from './components/team-drawer.vue'
const { proxy } = getCurrentInstance() as any
import { apiTeamQuery } from "@/api/teamKnowdge/teamDocApi"
import { apiFilesCollectionAddCollection, apiFilesCollectionCancelCollection } from "@/api/teamKnowdge/teamFileApi"
import { apiteamType } from "@/api/teamKnowdge/teamclassifyApi"
import CreateTeam from './components/create-team.vue'

const router = useRouter()
const route = useRoute()
const createTeamRefs = ref(null)
const TeamDrawerRefs = ref(null)
const routerInfo = ref(router.currentRoute.value)
const TeamLoading = ref(false)
const permission = ref({
  add: ['admin', 'team:add']
})
const searchInput = ref('')
const searchType = ref('0')
const popoverVisible = ref(false)
const type_id = ref('')
const typeList = ref([])
const teamTableData = ref([])
const buttonRef = ref()


const requestStr = reactive({
  page: 1,
  size: 10,
  total: 0,
})


const obtainData = async () => {
  let oParam = {
    size: requestStr.size,
    page: requestStr.page - 1
  }
  const res = await apiteamType(oParam)
  if (res.code == 200) {
    typeList.value = res.data.rows
  }
}


const openCreateClick = () => {
  createTeamRefs.value.open_createDialog()
}
const inputEnter = (e) => {
  searchInput.value = e.target.value
  requestStr.page = 1
  getTableList()
}
const selectAllTeamClick = (val) => {
  searchType.value = val
  if (val == '0' || val == '1') {
    type_id.value = null
  }
  requestStr.page = 1
  getTableList()
}
const teamTableRowDblClick = (row) => {
  if (route.path == '/newUi/teamKnowdge/teamDoc') {
    router.push({
      path: '/newUi/teamKnowdge/teamFile',
      query: { headNodeId: row.headNodeId, teamId: row.id }
    })
  } else {
    router.push({
      path: '/newUi/teamKnowdge/teamFile',
      query: { headNodeId: row.headNodeId, teamId: row.id }
    })
  }
}
const apiTeamInfoClick = (row) => {
  TeamDrawerRefs.value.handleOpen(row)
}
const FilesCollectionAddCollection = async (row) => {
  if (row.collection == '0') {
    const res = await apiFilesCollectionAddCollection({
      treeNodeId: row.id,
      fileType: 3
    })
    if (res.code == 200) {
      getTableList()
    }
  }
  if (row.collection == '1') {
    const res = await apiFilesCollectionCancelCollection({
      treeNodeId: row.id,
      fileType: 3
    })
    if (res.code == 200) {
      getTableList()
    }

  }
}
const refreshData = () => {
  getTableList()
}
const getTableList = () => {
  TeamLoading.value = true
  teamTableData.value = []
  let teamApiPromise
  if (searchType.value === '3') {
    teamApiPromise = apiTeamQuery({
      size: requestStr.size,
      page: requestStr.page - 1,
      teamName: searchInput.value,
      type: searchType.value,
      typeId: type_id.value
    })
  } else {
    teamApiPromise = apiTeamQuery({
      size: requestStr.size,
      page: requestStr.page - 1,
      teamName: searchInput.value,
      type: searchType.value,
      typeId: type_id.value ?? null
    })
  }
  teamApiPromise.then((res) => {
    if (res.code == 200 && res.data.rows) {
      teamTableData.value = res.data.rows
      requestStr.total = res.data.total
      popoverVisible.value = false
    }

  })
    .catch((err) => {
      // ElMessage.error(err.message)
    })
    .finally(() => {
      TeamLoading.value = false
    })
}
const handleSizeChange = (val) => {
  requestStr.size = val
  getTableList()
}
const handleCurrentChange = (val) => {
  requestStr.page = val
  getTableList()
}
const createTeam_refreshDatas = () => {
  getTableList()
}
onMounted(() => {
  getTableList()
  obtainData()
})
</script>



<style scoped lang="scss">
.page_vue {
  height: calc(100% - 50px);

  .route-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;

    .breadcrumb {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 15px;

      div {
        margin-left: 8px;
        color: #333;
      }
    }
  }
}

.create_box {
  :deep(.el-button--primary) {
    background-color: #6698ff;
    border-color: #6698ff;
  }

  :deep(.el-button--primary:focus) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }

  :deep(.el-button--primary:hover) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }
}

.teamSearch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding-right: 20px;
  margin-left: 20px;
  border-bottom: 1px solid #eee;

  .teamSearch_box {
    display: flex;
    align-items: center;
  }

  .inputClass {
    width: 220px;

    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      // background:#F8F8F8;
      cursor: default;

      .el-input__inner {
        cursor: default !important;
      }
    }
  }

  .search_btn {
    background: #f5f5f5;
    border-radius: 22px 22px 22px 22px;
    font-size: 12px;
    padding: 5px 13px;
    color: #666666;
    margin-left: 20px;
    cursor: pointer;
  }

  .search_btn_active {
    color: #6698ff;
    background-color: #eff4ff;
  }

  .team_num {
    font-size: 14px;
    color: #3d3d3d;
  }
}

.table_box {
  margin-left: 20px;

  .tableClass {
    border-color: rgba(0, 0, 0, 0);
  }

  .has-gutter {
    height: 50px !important;
  }

  th {
    color: #333;
    font-weight: normal;
  }

  .descending .sort-caret.descending {
    border-top-color: #6698ff;
  }

  p .ascending .sort-caret.ascending {
    border-bottom-color: #6698ff;
  }

  td.el-table__cell {
    border-bottom: 1px solid #eee;
  }

  .el-table__body tr:hover .realName_box_right {
    visibility: visible;
  }
}

.body_foot_page {
  margin-top: 20px;
}

.realName_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.realName_class {
  display: inline-block;
  // margin-top: 4px;
}

.realName_box_right {
  display: flex;
  align-items: center;
  visibility: hidden;

  .iconBox {
    padding: 7px 8px 2px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      color: #6698ff;
      background: rgba(102, 152, 255, 0.1);
    }
  }
}

.icon_size {
  font-size: 18px;
}

.peopleBox {
  display: flex;
  align-items: center;
  font-size: 12px;

  .people {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #56abfb;
    margin-right: 3px;

    span {
      display: inline-block;
      margin-top: 2px;
      transform: scale(0.9, 0.9);
    }
  }
}
</style>
